/**
 * @name		jQuery touchTouch plugin
 * @author		Martin Angelov
 * @version 	1.0
 * @url			http://tutorialzine.com/2012/04/mobile-touch-gallery/
 * @license		MIT License
 */

(function() {

	/* Private variables */

	var overlay = $('<div id="galleryOverlay">'),
		slider = $('<div id="gallerySlider">'),
		prevArrow = $('<a id="prevArrow"></a>'),
		nextArrow = $('<a id="nextArrow"></a>'),
		overlayVisible = false;

	/* Creating the plugin */

	$.fn.touchTouch = function() {

		var placeholders = $([]),
			index = 0,
			items = this; //this  是a ,是一个数组

		// Appending the markup to the page
		overlay.hide().appendTo('body');
		slider.appendTo(overlay);

		// Creating a placeholder for each image
		items.each(function() {
			placeholders = placeholders.add($('<div class="placeholder">'));
		});

		// Hide the gallery if the background is touched / clicked
		slider.append(placeholders).on('click', function(e) {
			console.log(e.target);   //看看控制台
			if (!$(e.target).is('img')) {
				hideOverlay();
			}
		});
		/**********************************/
		$('body').on('click', '.placeholder img', function(e) {
				//touchstart在你之前发生，不管些什么，都先执行下面的
		});
			// Listen for touch events on the body and check if they
			// originated in #gallerySlider img - the images in the slider.
		 $('body').on('touchstart', '#gallerySlider img', function(e) {
			var touch = e.originalEvent,
			startX = touch.changedTouches[0].pageX;
			startY = touch.changedTouches[0].pageY;
			slider.on('touchmove', function(e) {
				e.preventDefault();
				touch = e.originalEvent.touches[0] ||
					e.originalEvent.changedTouches[0];
				if (touch.pageX - startX > 10) {
					console.log("右划");
					slider.off('touchmove');
					showPrevious();
				} else if (touch.pageX - startX < -10) {
					console.log("左划");
					slider.off('touchmove');
					showNext();
				};
				if (touch.pageY - startY > 10) {
					console.log("下划");
				} else if (touch.pageY - startY < -10) {
					console.log("上划");
				};
			});

			// Return false to prevent image 
			// highlighting on Android
			return false;

		}).on('touchend', function() {
			slider.off('touchmove');
		});

		// Listening for clicks on the thumbnails
		/*
		 代码开始位置，从这里看从这里看从这里看从这里看从这里看从这里看 
		 */
		items.on('click', function(e) {
			e.preventDefault();

			// Find the position of this image
			// in the collection

			showOverlay(index);
			showImage(index);

			// Preload the next image
			preload(index + 1);

			// Preload the previous
			preload(index - 1);

		});

		// If the browser does not have support 
		// for touch, display the arrows
		if (!("ontouchstart" in window)) {
			overlay.append(prevArrow).append(nextArrow);

			prevArrow.click(function(e) {
				e.preventDefault();
				showPrevious();
			});

			nextArrow.click(function(e) {
				e.preventDefault();
				showNext();
			});
		}

		// Listen for arrow keys
		$(window).bind('keydown', function(e) {

			if (e.keyCode == 37) {
				showPrevious();
			} else if (e.keyCode == 39) {
				showNext();
			}

		});

		/* Private functions */

		function showOverlay(index) {

			// If the overlay is already shown, exit
			if (overlayVisible) {
				return false;
			}

			// Show the overlay
			overlay.show();

			setTimeout(function() {
				// Trigger the opacity CSS transition
				overlay.addClass('visible');
			}, 100);

			// Move the slider to the correct image
			offsetSlider(index);

			// Raise the visible flag
			overlayVisible = true;
		}

		function hideOverlay() {
			// If the overlay is not shown, exit
			if (!overlayVisible) {
				return false;
			}

			// Hide the overlay
			overlay.hide().removeClass('visible');
			overlayVisible = false;
		}

		function offsetSlider(index) {
			// This will trigger a smooth css transition
			slider.css('left', (-index * 100) + '%');
		}

		// Preload an image by its index in the items array
		function preload(index) {
			setTimeout(function() {
				showImage(index);
			}, 1000);
		}

		// Show image in the slider
		function showImage(index) {

			// If the index is outside the bonds of the array
			if (index < 0 || index >= items.length) {
				return false;
			}

			// Call the load function with the href attribute of the item
			loadImage(items.eq(index).attr('href'), function() {
				placeholders.eq(index).html(this);
			});
		}

		// Load the image and execute a callback function.
		// Returns a jQuery object

		function loadImage(src, callback) {
			var img = $('<img>').on('load', function() {
				callback.call(img);
			});

			img.attr('src', src);
		}

		function showNext() {

			// If this is not the last image
			if (index + 1 < items.length) {
				index++;
				offsetSlider(index);
				preload(index + 1);
			} else {
				// Trigger the spring animation

				slider.addClass('rightSpring');
				setTimeout(function() {
					slider.removeClass('rightSpring');
				}, 500);
			}
		}

		function showPrevious() {

			// If this is not the first image
			if (index > 0) {
				index--;
				offsetSlider(index);
				preload(index - 1);
			} else {
				// Trigger the spring animation

				slider.addClass('leftSpring');
				setTimeout(function() {
					slider.removeClass('leftSpring');
				}, 500);
			}
		}
	};

})(jQuery);